<template>
  <article class="page page-mail-sender">
    <h4 class="text-center">简易邮件发送</h4>
    <form class="form">
      <div class="form-group">
        <div class="row-flex row-flex-smtp" align="center">
          <div class="row-flex-prefix">SMTP服务</div>
          <div class="row-flex-main"><input class="form-control" type="text" v-model.trim="host" placeholder="SMTP服务，如 smtp.qq.com" /></div>
          <div class="row-flex-suffix"><input class="form-control" type="text" v-model.trim="port" placeholder="端口号，如 465" /></div>
        </div>
      </div>
      <div class="form-group">
        <div class="row-flex" align="center">
          <div class="row-flex-prefix">授权码</div>
          <div class="row-flex-main"><input class="form-control" type="password" v-model.trim="pass" placeholder="授权码" /></div>
        </div>
      </div>
      <div class="form-group">
        <div class="row-flex" align="center">
          <div class="row-flex-prefix">发件人</div>
          <div class="row-flex-main"><input class="form-control" type="text" v-model.trim="from" placeholder="发件人邮箱" /></div>
        </div>
      </div>
      <div class="form-group">
        <div class="row-flex" align="center">
          <div class="row-flex-prefix">收件人</div>
          <div class="row-flex-main"><input class="form-control" type="text" v-model.trim="to" placeholder="收件人邮箱，多个邮箱用“,”分隔" /></div>
        </div>
      </div>
      <div class="form-group">
        <div class="row-flex" align="center">
          <div class="row-flex-prefix">主题</div>
          <div class="row-flex-main"><input class="form-control" type="text" v-model.trim="subject" placeholder="请输入主题" /></div>
        </div>
      </div>
      <div class="form-group">
        <div class="row-flex" align="center">
          <div class="row-flex-prefix">内容</div>
          <div class="row-flex-main"><textarea class="form-control" v-model.trim="content" placeholder="请输入内容" rows="10"></textarea></div>
        </div>
      </div>
      <div class="form-group">
        <div class="row-flex" align="center">
          <div class="row-flex-prefix"></div>
          <div class="row-flex-main"><x-button type="primary" block @click="send">发送</x-button></div>
        </div>
      </div>
    </form>
  </article>
</template>

<script>
let nodemailer = global.nodemailer || null

export default {
  name: 'mail-sender',
  data () {
    return {
      host: '', // smtp.qq.com
      port: '', // 465
      pass: '', // xrbwmtwdz5mniybjhjs
      from: '', // 461399479@qq.com
      to: '', // biao.yuan@jsxfedu.com
      subject: '',
      content: '',
      testAccount: null,
      transporter: null,
    }
  },
  mounted () {
    nodemailer = this.$sharedObject('nodemailer')
  },
  methods: {
    // 初始化
    initTransporter () {
      // this.testAccount = nodemailer.createTestAccount()
      // this.transporter = nodemailer.createTransport({
      //   host: 'smtp.ethereal.email',
      //   port: 587,
      //   secure: false,
      //   auth: {
      //     user: this.testAccount.user,
      //     pass: this.testAccount.pass,
      //   }
      // })
      this.transporter = nodemailer.createTransport({
        host: this.host,
        port: this.port,
        auth: {
          user: this.from,
          pass: this.pass,
        }
      })
    },
    // 发送
    send () {
      if (!this.host) {
        this.$toast('请输入SMTP服务地址')
        return
      }
      if (!this.port) {
        this.$toast('请输入SMTP服务端口号')
        return
      }
      if (!this.pass) {
        this.$toast('请输入授权码')
        return
      }
      if (!this.from) {
        this.$toast('请输入发件人邮箱')
        return
      }
      if (!this.to) {
        this.$toast('请输入收件人邮箱')
        return
      }
      if (!this.transporter) {
        this.initTransporter()
      }
      this.transporter.sendMail({
        from: this.from,
        to: this.to,
        subject: this.subject,
        text: this.content,
      }).then((res) => {
        this.$toast('邮件已发送：' + res.response)
      }).catch((err) => {
        this.$toast('发生错误：' + err)
      })
    },
  }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.row-flex {
  .row-flex-prefix {
    width: 6em;
    text-align: right;
  }
}
.row-flex-smtp {
  .row-flex-suffix {
    width: 15%;
  }
}
.form {
  height: calc(100vh - 137px);
  display: flex;
  flex-direction: column;
  .form-group {
    textarea {
      display: block;
      width: 100%;
      resize: none;
    }
  }
}
</style>
